<template>
    <div>
        <!--功能按钮-->
        <Button style="margin:0 10px 10px 0" type="primary" @click="modalAdd = true">添加</Button>
        <Button style="margin:0 10px 10px 0" type="error" @click="removes">删除多个</Button>
        <!--搜索框-->
        <Input v-model="filter.name">
            <Button slot="append" icon="ios-search" @click="searchData"></Button>
        </Input>
        <!--信息表格-->
        <Table ref="selection" @on-selection-change="onSelectionChangeHandler" border :columns="columns" :data="data"></Table>
        <!--分页-->
        <Page :total="total" :page-size="filter.rows" :page-size-opts="[2,4,6,8,10]" @on-page-size-change="onPageSizeChangeHandler" @on-change="onChangeHandler" show-sizer></Page>
        <!--弹框-->
        <Modal
            v-model="modalAdd"
            title="添加信息框"
            >
            <!--在弹出框里面再加一个表单，用于添加信息的书写-->
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="用户名" prop="name">
                    <Input v-model="formValidate.name" placeholder="输入用户名"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input v-model="formValidate.password" placeholder="输入密码"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { base } from "../common/base";
export default {
  mixins: [base],
  data() {
    return {
      formValidate: {
        name: "",
        password: ""
      },
      ruleValidate: {
        name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      },
      columns: [
        {
          //单选框
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          //用户模块中的用户姓名
          title: "用户名",
          key: "name",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.name)
            ]);
          }
        },
        {
          //用户模块中的用户密码
          title: "密码",
          key: "password",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "locked"
                }
              }),
              h("strong", params.row.password)
            ]);
          }
        },
        {
          //用户模块中的操作（修改和删除）
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.editData(params.row._id);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row._id); //这里的params.row._id就是当前点击的用户信息的id
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    };
  }
};
</script>